<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearFix:before,
        .clearFix:after {
            content: "";
            display: table;
        }

        .clearFix:after {
            clear: both;
        }

        .clearFix {
            zoom: 1;
        }

        ul {
            display: block;
        }
        button {
            display: block;
            margin: 10px 0 20px 0;
        }
        li {
            float: left;
            list-style: none;
            width: auto;
            height: 20px;
            margin-right: 10px;
            padding: 5px;
            background-color: pink;
            border: 1px solid black;
        }
    </style>
    <script>
        function myClick(idStr, fun) {
            let btn = document.getElementById(idStr);
            btn.onclick = fun;
        }
        window.onload = function(){
            myClick("addGZ", function(){
                let li = document.createElement("li");
                let city = document.getElementById("city");

                // let textGZ = document.createTextNode("广州");
                // li.appendChild(textGZ);

                let gz = "广州";
                city.appendChild(li);
                li.innerHTML = gz;

                // city.innerHTML += "<li>"+ gz +"</li>"; 
            })
            myClick("insertGZ", function(){
                let li = document.createElement("li");
                let city = document.getElementById("city");
                let textGZ = document.createTextNode("广州");
                let bj = document.getElementById("bj");
                city.insertBefore(li, bj);
                li.appendChild(textGZ);
            })
            myClick("replaceGZ", function(){
                let li = document.createElement("li");
                let city = document.getElementById("city");
                let textGZ = document.createTextNode("广州");
                let bj = document.getElementById("bj");
                city.replaceChild(li, bj);
                li.appendChild(textGZ);
            })
            myClick("deleteBJ", function(){
                let city = document.getElementById("city");
                let bj = document.getElementById("bj");
                // city.removeChild(bj);
                bj.parentNode.removeChild(bj);
            })
        }
    </script>
</head>

<body>
    <ul class="city clearFix" id="city">
        <p>你喜欢哪个城市？</p>
        <button id="addGZ">点击添加城市-广州</button>
        <button id="insertGZ">点击插入城市-广州</button>
        <button id="replaceGZ">点击替换城市-广州</button>
        <button id="deleteBJ">点击删除城市-北京</button>
        <li id="bj">北京</li>
        <li>上海</li>
        <li>东京</li>
        <li>首尔</li>
    </ul>
</body>

</html>